<template>
  <div>
    <el-card shadow="hover">
      <div class="user">
        <img :src="userImg" />
        <div class="userinfo">
          <p class="name">2021001</p>
          <p class="access">某某学校————小刘同学</p>
        </div>
      </div>
      <div class="login-info">
        <p>上次登录时间：<span>2020-2-1</span></p>
        <p>上次登录地点：<span>湖北武汉</span></p>

        个人信息完善中.......
        <button @click="fill_up()">信息完善</button>
      </div>
    </el-card>

    <div id="chartPie" class="pie-wrap"></div>
    <div id="chartLine" class="line-wrap"></div>

    <el-dialog title="完善个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">

        <el-form-item label="年级" :label-width="formLabelWidth">
          <el-radio-group v-model="radio">
            <el-radio :label="3">本科生</el-radio>
            <el-radio :label="6">研究生</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="研究方向:" :label-width="formLabelWidth">
          <el-radio-group v-model="radio">
            <el-radio :label="3">宪法学与行政法学</el-radio>
            <el-radio :label="6">刑法学</el-radio>
            <el-radio :label="9">民商法学</el-radio>
            <el-radio :label="9">诉讼法学</el-radio>
            <el-radio :label="9">经济法学</el-radio>
          </el-radio-group>
        </el-form-item>
              
              <el-form-item label="偏好" :label-width="formLabelWidth">
          <el-radio-group v-model="radio">
            <el-radio :label="3">最新案例</el-radio>
            <el-radio :label="6">热点案例</el-radio>
            <el-radio :label="6">指导案例</el-radio>
            <el-radio :label="9">全部</el-radio>
          </el-radio-group>
        </el-form-item>

              <el-form-item label="职业发展规划" :label-width="formLabelWidth">
          <el-radio-group v-model="radio">
            <el-radio :label="3">诉讼类律师</el-radio>
            <el-radio :label="6">非诉讼类律师</el-radio>
            <el-radio :label="9">法官检察官</el-radio>
            <el-radio :label="9">公司法务</el-radio>
            <el-radio :label="9">公务员</el-radio>
             <el-radio :label="9">暂时未定</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      radio:3,
      chartPie: null,
      chartLine: null,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawPieChart();
    });
  },
  methods: {
    fill_up() {
      console.log("完善个人信息");
      this.dialogFormVisible = true;
    },
    drawPieChart() {
      let mytextStyle = {
        color: "#333",
        fontSize: 18,
      };
      let mylabel = {
        show: true,
        position: "right",
        offset: [30, 40],
        formatter: "{b} : {c} ({d}%)",
        textStyle: mytextStyle,
      };
      this.chartPie = echarts.init(
        document.getElementById("chartPie"),
        "macarons"
      );
      this.chartPie.setOption({
        title: {
          text: "用户偏好分析饼图",
          subtext: "用户行为统计",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          data: ["课程学习", "焦点评论", "点赞", "案情分析作业", "浏览案例"],
          left: "center",
          top: "bottom",
          orient: "horizontal",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "课程学习" },
              { value: 310, name: "焦点评论" },
              { value: 234, name: "点赞" },
              { value: 135, name: "案情分析作业" },
              { value: 1548, name: "浏览案例" },
            ],
            animationEasing: "cubicInOut",
            animationDuration: 2600,
            label: {
              emphasis: mylabel,
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
.pie-wrap {
  width: 100%;
  height: 400px;
}
</style>